import React, { Component } from 'react'
import { View, Text, StyleSheet, Image } from 'react-native'
import TabNavigator from 'react-native-tab-navigator';
import Home from './components/tabar/Home'
import Search from './components/tabar/Search'
import ShoppingCar from './components/tabar/ShoppingCar'
import Me from './components/tabar/Me'

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: "home"
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <TabNavigator>
          {/*home */}
          <TabNavigator.Item
            selected={this.state.selectedTab === 'home'}
            title="首页"
            renderIcon={() => <Image style={{ height: 25, width: 25 }} source={require('./components/images/home2.jpg')} />}
            renderSelectedIcon={() => <Image style={{ height: 25, width: 25 }} source={require('./components/images/home1.jpg')} />}
            // badgeText="1"
            onPress={() => this.setState({ selectedTab: 'home' })}
          >
            <Home />
          </TabNavigator.Item>
          {/*search */}
          <TabNavigator.Item
            selected={this.state.selectedTab === 'search'}
            title="搜索"
            renderIcon={() => <Image style={{ height: 25, width: 25 }} source={require('./components/images/search1.jpg')} />}
            renderSelectedIcon={() => <Image style={{ height: 25, width: 25 }} source={require('./components/images/search2.jpg')} />}
            // renderBadge={() => <CustomBadgeView />}
            onPress={() => this.setState({ selectedTab: 'search' })}
          >
            <Search />
          </TabNavigator.Item>
          {/*购物车*/}
          <TabNavigator.Item
            selected={this.state.selectedTab === 'shopping'}
            title="购物车"
            badgeText='0'
            renderIcon={() => <Image style={{ height: 25, width: 25 }} source={require('./components/images/shopCar2.jpg')} />}
            renderSelectedIcon={() => <Image style={{ height: 25, width: 25 }} source={require('./components/images/shopCar1.jpg')} />}
            // renderBadge={() => <CustomBadgeView />}
            onPress={() => this.setState({ selectedTab: 'shopping' })}
          >
            <ShoppingCar />
          </TabNavigator.Item>
          {/*我的*/}
          <TabNavigator.Item
            selected={this.state.selectedTab === 'me'}
            title="我的"
            renderIcon={() => <Image style={{ height: 25, width: 25 }} source={require('./components/images/me2.jpg')} />}
            renderSelectedIcon={() => <Image style={{ height: 25, width: 25 }} source={require('./components/images/me1.jpg')} />}
            // renderBadge={() => <CustomBadgeView />}
            onPress={() => this.setState({ selectedTab: 'me' })}
          >
            <Me />
          </TabNavigator.Item>
        </TabNavigator>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
})